<template>
	<view class="wrap-area-content" v-if="item">
		<view class="area-list">
			<block v-for="(subItem, index) in value" :key="index">
				<view class="area-item">
					<view class="area-title-bg flex align-center just-between">
						<view class="title">
							可配送地区{{ index + 1 }}
						</view>
						
						<view class="btn-bg flex align-center">
							<view class="btn-txt" @click="onChooseArea(index)">
								选择配送区域
							</view>
							
							<image
								class="delete-btn"
								@click="onDelete(index)"
								:src="$staticImagePath('goods/yf_sc.png')"
							/>
						</view>
					</view>
					
					<view class="area-box flex column">
						<view class="area-name">
							{{ subItem.city_name }}
						</view>
						
						<view class="input-box flex align-center">
							<view class="input-bg flex align-center">
								<view>
									{{ ["首件", "首重", "首体积"][valuationType] }}
								</view>
								
								<input
									class="input"
									placeholder="请输入"
									placeholder-class="place"
									type="digit"
									:value="subItem.first"
									@input="onFirstInput($event, index)"
								/>
								
								<view>
									{{ ["件", "kg", "m³"][valuationType] }}
								</view>
							</view>
							
							<view class="input-bg flex align-center">
								<view>
									运费
								</view>
								
								<input
									class="input"
									placeholder="请输入"
									placeholder-class="place"
									type="digit"
									:value="subItem.first_fee"
									@input="onFirstPriceInput($event, index)"
								/>
								
								<view>
									元
								</view>
							</view>
						</view>
						
						<view class="input-box flex align-center">
							<view class="input-bg flex align-center">
								<view>
									{{ ["续件", "续重", "续体积"][valuationType] }}
								</view>
								
								<input
									class="input"
									placeholder="请输入"
									placeholder-class="place"
									type="digit"
									:value="subItem.additional"
									@input="onAdditionalInput($event, index)"
								/>
								
								<view>
									{{ ["件", "kg", "m³"][valuationType] }}
								</view>
							</view>
							
							<view class="input-bg flex align-center">
								<view>
									运费
								</view>
								
								<input
									class="input"
									placeholder="请输入"
									placeholder-class="place"
									type="digit"
									:value="subItem.additional_fee"
									@input="onAdditionalPriceInput($event, index)"
								/>
								
								<view>
									元
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<view class="area-add flex align-center just-center">
			<view class="add-btn" @click="onAddArea">
				新增配送区域
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: Array,
				default: [],
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 类型
			 */
			valuationType: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				chooseIndex: 0,
			}
		},
		mounted() {
			uni.$on("areaChoose", (item) => {
				var list = [...this.value];
				var id = [];
				for (let i = 0; i < item.list.length; i++) {
					const subList = item.list[i];
					id.push(subList[subList.length - 1].id);
				}
				list[this.chooseIndex].city_name = item.name;
				list[this.chooseIndex].city_id = id.join(",");
				this.$emit("input", list);
			})
		},
		methods: {
			/**
			 * 选择区域
			 */
			onChooseArea(index) {
				this.chooseIndex = index;
				var obj = {
					title: "选择运费区域",
					isHaveTotalCountry: false,
					isHaveArea: false,
					type: 1,
					before: this.value[index].city_name,
				}
				this.$wanlshop.to(`/pages/new/chooseArea/chooseArea?obj=${JSON.stringify(obj)}`);
			},
			/**
			 * 删除
			 */
			onDelete(index) {
				let list = [...this.value];
				list.splice(index, 1);
				this.$emit("input", list);
			},
			/**
			 * 输入框 首件
			 */
			onFirstInput(e, index) {
				var list = [...this.value];
				list[index].first = e.detail.value;
				this.$emit("input", list);
			},
			/**
			 * 输入框 首件价格
			 */
			onFirstPriceInput(e, index) {
				var list = [...this.value];
				list[index].first_fee = e.detail.value;
				this.$emit("input", list);
			},
			/**
			 * 输入框 续件
			 */
			onAdditionalInput(e, index) {
				var list = [...this.value];
				list[index].additional = e.detail.value;
				this.$emit("input", list);
			},
			/**
			 * 输入框 续件价格
			 */
			onAdditionalPriceInput(e, index) {
				var list = [...this.value];
				list[index].additional_fee = e.detail.value;
				this.$emit("input", list);
			},
			/**
			 * 添加配送区域
			 */
			onAddArea() {
				var list = [...this.value];
				let obj = {
					first: "",
					first_fee: "",
					additional: "",
					additional_fee: "",
					city_id: "",
					city_name: "",
				}
				list.push(obj)
				this.$emit("input", list);
			},
		}
	}
</script>

<style lang="scss">
	.wrap-area-content {
		width: 100%;
		overflow: hidden;
		
		.area-list {
			width: 100%;
			overflow: hidden;
			
			.area-item {
				width: 100%;
				background-color: white;
				border-radius: 16rpx;
				padding: 0rpx 30rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0rpx;
				}
				
				.area-title-bg {
					width: 100%;
					height: 106rpx;
					border-bottom: 2rpx solid #DBDBDB;
					overflow: hidden;
					
					.title {
						color: #333333;
						font-size: 30rpx;
					}
					
					.btn-bg {
						gap: 30rpx;
						overflow: hidden;
						
						.btn-txt {
							width: 200rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							background: linear-gradient(to right, #84BD00, #4982EA);
							border-radius: 10rpx;
							overflow: hidden;
							color: white;
							font-size: 24rpx;
						}
						
						.delete-btn {
							width: 37rpx;
							height: 37rpx;
						}
					}
				}
				
				.area-box {
					width: 100%;
					padding: 40rpx 0rpx;
					box-sizing: border-box;
					overflow: hidden;
					gap: 30rpx;
					
					.area-name {
						width: 100%;
						line-height: 1.5;
						color: #999999;
						font-size: 26rpx;
					}
					
					.input-box {
						width: 100%;
						overflow: hidden;
						gap: 30rpx;
						
						.input-bg {
							flex: 1;
							overflow: hidden;
							gap: 17rpx;
							color: #333333;
							font-size: 30rpx;
							
							.input {
								flex: 1;
								background: #F6F6F6;
								height: 80rpx;
								text-align: center;
								color: #333333;
								border-radius: 20rpx;
								font-size: 30rpx;
								overflow: hidden;
							}
							
							.place {
								color: #999999;
								font-size: 30rpx;
							}
						}
					}
					
					
				}
			}
		}
		
		.area-add {
			width: 100%;
			padding: 30rpx 0rpx;
			box-sizing: border-box;
			overflow: hidden;
			
			.add-btn {
				width: 305rpx;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				background: linear-gradient(to right, #84BD00, #4982EA);
				border-radius: 50rpx;
				overflow: hidden;
				color: white;
				font-size: 30rpx;
			}
		}
	}
</style>